/* WELCOME SCREEN STYLES */
.clearfix:after {
    content: ".";
    display: block; /* all standards-compliant browsers */
    height: 0;
    clear: both;
    visibility: hidden;
}

html, body { 
	height: 100%; 
	margin: 0px; 
	padding: 0px; 
	font-size: 13px;

	/* prevent text selection */
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;

	/* use Segoe font */
	font-family: 'Segoe UI'; 
	color: rgb(0,0,0);

	/* Less-distracting scrollbars */
	scrollbar-face-color: white; 
	scrollbar-highlight-color: white;
	scrollbar-shadow-color: white;
	scrollbar-3dlight-color: rgb(230,230,230);
	scrollbar-arrow-color: rgb(230,230,230); 
	scrollbar-track-color: rgb(230,230,230);
	scrollbar-darkshadow-color: rgb(230,230,230);
	overflow: hidden;
}

/* navigation section */
div#navigation {
	position: absolute; 
	left: 0px; 
	top: 0px; 
	width: 214px; 
	height: 100%;
	background-color: rgb(230,230,230); 
	background-image: url('logo.png'); 
	background-repeat: no-repeat;
	background-position: 31px 34px;
	background-size: 152px 152px;
	overflow: hidden;
	z-index: 2;
}

div#WSCheckBoxDiv {
	margin: 10px 10px 10px 3px;
}

div#collapseNavButton {
	font-family: 'Segoe UI Symbol';
	font-size: x-large;
	position: absolute;
	top: 0px;
	left: 195px;
	width: 18px;
	height: 187px;
	z-index: 5;
}
div#collapseNavButton a {
	color: rgb(0,0,0);
	text-decoration: none;
}

div#collapseNavButton:hover a {
	color: rgb(0,153,51);
}

td#WSCheckBox {
	padding-top: 3px;
	vertical-align: top;
}

div.badge {
	background-image: url('badge.png');
	background-repeat: no-repeat; 
	position: absolute;
	display: none;
	z-index: 5;
	width: 10px;
	height: 10px;
	left: 20px;
	margin-top: -2px;
}

div#navigation img {
	position: absolute;
	z-index: 4;
	width: 22px;
	height: 22px;
	left: 6px;
}

div#navigation ul { 
	padding: 0px;  
	padding-top: 211px;
	margin-left: 0px; 
	margin-top: 0px;
}

div#navigation ul li > div { 
	list-style: none; 
	margin: 0px;
	padding: 6px; 
	min-height: 22px; 
	vertical-align: middle; 
	padding-left: 32px;
	width: 176px;
}
div#navigation ul li:hover { 
	background-color: rgb(179,179,179); 

}


/* post-collapse-animation state */
div#navigation.collapsed-true { width: 31px; }
div#main.collapsed-true { left: 32px; }

.hidden-true { display: none; }
.hidden-false { display: inherit; }

.bordered { border: solid 1px rgb(230,230,230); }

/* Selected menu items are green */
div#navigation ul li div.selected-true { background-color: rgb(255,255,255) !important;}
div#navigation ul li div.selected-true:hover { background-color: rgb(255,255,255) !important;}

/* View-switching animation support */
.view-container { position: relative; }

/* main content section */
div#main { position: absolute; left: 214px; top: 0px; padding-left: 30px; }
div#main > p { margin-right: 30px; }
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: underline; }

/* Page title */
div#page-title { margin-top: 34px; margin-bottom: 25px; font-size: 48px; height: 152px; min-width: 340px; font-family: 'Segoe UI Light'; }

/* Menu list defaults */
div#menu { width: 340px; border-right: solid 1px rgb(200,200,200); overflow-x: hidden; overflow-y: auto; position: relative; left: 0px; z-index: 0;}

div#menu > ul { width: 100%; margin: 0px; padding: 0px; padding-bottom: 52px; }
div#menu ul { padding-left: 0px; margin-left: 0px; }
div#menu ul li { list-style: none; margin-bottom: 0px; }

/* First-level menu items */
div#menu > ul > li { font-size: 20px; margin: 0px; }
div#menu > ul > li + li { margin-top:40px; }
div#menu > ul > li > a { color: rgb(0,0,0); }
div#menu > ul > li > a:hover { color: rgb(0,0,0); }
div#menu > ul ul { margin-top: 18px; margin-bottom: 0px; }

/* Second-level menu items */
div#menu > ul ul > li { font-size: 13px; }
div#menu > ul ul > li + li { margin-top: 10px; }
div#menu > ul ul > li > a { color: rgb(128,128,128); }
div#menu > ul ul > li > a:hover { color: rgb(102,102,102); }

/* External links */
div#main > ul { margin: 0px; padding: 0px; }
li.external-link { list-style: none; }

/* Selected menu items are green */
div#main ul li.selected-true > a { color: rgb(0,153,51) !important; }
div#main ul li.selected-true:hover > a { color: rgb(0,153,51) !important; }
div#main ul li.selected-true > a { color: rgb(0,153,51) !important; }

div#main div.preview { position: absolute; left: 371px; top: 211px; padding-left: 30px;}
.nowrap-ellipses { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

.enabled-false { cursor: default; color:rgb(179,179,179) !important; pointer-events: none; }
.enabled-false a { cursor: default; color:rgb(179,179,179) !important; text-decoration: none !important; pointer-events: none; }

/* image gallery styles */
/*div.gallery { width: 340px; overflow-y: scroll; border-right: solid 1px rgb(200,200,200); }
*/div.gallery div.thumb { float: left; margin: 2px; overflow:hidden;}
div.gallery div.thumb { width: 101px; height: 101px; line-height: 95px; text-align: center; padding: 0px; }
div.gallery div.thumb > img { max-width: 200%; max-height: 200%; position: relative; left:-50px; top:-50px;}
div.gallery div.thumb.medium { width: 208px; height: 208px; line-height: 202px; }
div.gallery div.thumb.medium > img { position: relative; left:-104px; top:-104px;}
div.gallery div.thumb.right { float: right; }
div.gallery div.thumb.big { width: 315px; height: 315px; line-height: 309px; clear: both; }
div.gallery div.thumb.big > img { position: relative; left:-157px; top:-157px;}
div.gallery div.thumb { border: solid 1px white; }
div.gallery div.thumb:hover { border-color: rgb(230,230,230); }
div.gallery div.thumb.selected { border-color: rgb(0,153,51); }

/* What's New styles */
#fullcontent {
	position: absolute;
	left: 30px;
	top: 211px;
    overflow-y: auto;
}
#fullcontentUpdates {
	position: absolute;
	left: 30px;
	top: 211px;
}
#content {
	color: rgb(128,128,128);
	position: absolute; 
	left: 371px; 
	top: 211px; 
	padding-left: 30px;
	overflow-y: auto;
}
#content > * { padding-right: 30px }
#content ul { 
	list-style: none; 
	margin: 0px; 
	padding: 0px;
	padding-bottom: 30px; 
}
#content .title {
	font-size: 16px; 
	margin-top: 3px;
	font-weight:bold;
	font-family: "Segoe UI Light";
	text-align:left;
}
#content .description {
	margin-top: 7px;
	text-align:left;
}
div.hr {
	border-top: solid 1px rgb(230,230,230);
	margin-top: 24px;
	margin-bottom: 24px;
}
#content ul li:first-child div.hr {
	border-width: 5px;
}
#content ul:first-child li:first-child div.hr {
	display: none;
}

#whatsnew #content li, #need_help #content li {
	max-width: 640px;
}

/* Need help? styles */
#need_help #content img {
	border:0;
}
#need_help #content ul { 
	padding-bottom: 0px; 
}


/* Updates styles */
#updates ul { 
	list-style: none; 
	margin: 0px; 
	padding: 0px 10px 10px 0;
	overflow-y: auto;
	height:300px;
}

#updates ul li{
	white-space: normal;
}

#updates ul li .title {
	font-size: 16px; 
	margin-top: 3px;
	color: rgb(77,77,77);
	font-weight:bold;
	text-align:left;
	padding-bottom: 20px;
}

#updates ul li .description {
	font-size: 13px; 
	margin-top: 7px;
	text-align:left;
	color: rgb(77,77,77);
}
#updates .page-subtitle {
	font-size: 20px;
	color: rgb(77,77,77);
}

#sizeButtons {
	position: absolute;
	top: 4px;
	right: 30px;
	z-index: 100;
}
#sizeButtons div {
	float: left;
	font-weight: bold;
	text-align: center;
	width: 24px;
	height: 24px;
	margin-right: 5px;
	font-family: 'Segoe UI Light';
}
#sizeButtons div:hover { color: rgb(0,153,51); }
#sizeUp { font-size: 24px; line-height: 24px; }
#sizeDn { font-size: 14px; line-height: 32px; }

div.menupopper {
	position: absolute;
	top: 4px;
	left: 30px;
	font-size: 24pt; line-height: 24px;
}
div.menupopper:hover { color: #009933; }
div.glow { color: #009933; font-weight: bold; }
div.glow:hover { font-weight: normal; }


/* different font sizes */
body.zoom-1 { font-size: 9px; }
body.zoom-1 div#menu > ul ul > li { font-size: 9px; }
body.zoom-1 #updates ul li .description { font-size: 9px; }
body.zoom-1 #content .title { font-size: 12px; }
body.zoom-1 #updates ul li .title {	font-size: 12px; }
body.zoom-1 div.page-subtitle { font-size: 14px; }
body.zoom-1 div#menu > ul > li { font-size: 14px; }
body.zoom-1 div#page-title { font-size: 34px; }

body.zoom-2 { font-size: 11px; }
body.zoom-2 div#menu > ul ul > li { font-size: 11px; }
body.zoom-2 #updates ul li .description { font-size: 11px; }
body.zoom-2 #content .title { font-size: 14px; }
body.zoom-2 #updates ul li .title {	font-size: 14px; }
body.zoom-2 div.page-subtitle { font-size: 17px; }
body.zoom-2 div#menu > ul > li { font-size: 17px; }
body.zoom-2 div#page-title { font-size: 40px; }

body.zoom-4 { font-size: 15px; }
body.zoom-4 div#menu > ul ul > li { font-size: 15px; }
body.zoom-4 #updates ul li .description { font-size: 15px; }
body.zoom-4 #content .title { font-size: 18px; }
body.zoom-4 #updates ul li .title {	font-size: 18px; }
body.zoom-4 div.page-subtitle { font-size: 23px; }
body.zoom-4 div#menu > ul > li { font-size: 23px; }
body.zoom-4 div#page-title { font-size: 56px; }

body.zoom-5 { font-size: 17px; }
body.zoom-5 div#menu > ul ul > li { font-size: 17px; }
body.zoom-5 #updates ul li .description { font-size: 17px; }
body.zoom-5 #content .title { font-size: 20px; }
body.zoom-5 #updates ul li .title {	font-size: 20px; }
body.zoom-5 div.page-subtitle { font-size: 26px; }
body.zoom-5 div#menu > ul > li { font-size: 26px; }
body.zoom-5 div#page-title { font-size: 64px; }

/* Workspace page */

div#continue_section 
{ 
	position: absolute; 
	right: 30px; 
	bottom: 30px; 
	font-size: 18px; 
	font-family: 'Segoe UI Light';
}

div#continue_section a { color: rgb(128,128,128); }
div#continue_section a:hover { color: rgb(102,102,102); }

#workspace .previewText, #updates ul {
	max-width: 640px;
}


/* Get Started */
#getstarted #content {
	max-width: 640px;
}


/* Membership & subscription */
#membership_subscription p {
	color: rgb(77,77,77);
	max-width: 640px;
}

#membership_subscription .page-subtitle {
	font-size: 20px;
	color: rgb(77,77,77);
}

/* Community */
#community p {
	color: rgb(77,77,77);
	max-width: 640px;
}

#community .page-subtitle {
	font-size: 20px;
	color: rgb(77,77,77);
}


#background {
	float: left;
	position: absolute; left: -1px; top: -1px; width: 100%; height: 100%;
	z-index: -100;
	margin: 0px;
	padding: 0px;
}

/* First launch page */

#firstLaunch #video_section
{
    position: absolute;
    z-index: 0;
    opacity: 0;
	display: none;
	background:rgb(0,153,51);
}

#iframe { display: block; width:100%; height:100% }


#firstLaunch #continue_section
{
	display:none;
	position: absolute; 
	right: 100px; 
}

#firstLaunch #title { 
	font-size: 48px; 
	font-family: 'Segoe UI Light';
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
